<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<div id="map"></div>
<canvas id="canvas"></canvas>

<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=baiduKey"></script>
<script type="text/javascript" src="../../js/mapv.js"></script>

<script type="text/javascript">

  // 百度地图API功能
  var map = new BMap.Map("map", {
    enableMapClick: false
  });    // 创建Map实例
  map.centerAndZoom(new BMap.Point(106.563777, 29.578285), 12);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

  // 地图自定义样式
  map.setMapStyle({
    styleJson: [
      {
        "featureType": "land",
        "elementType": "geometry",
        "stylers": {
          "color": "#212121"
        }
      },
      {
        "featureType": "building",
        "elementType": "geometry",
        "stylers": {
          "color": "#2b2b2b"
        }
      },
      {
        "featureType": "highway",
        "elementType": "all",
        "stylers": {
          "lightness": -75,
          "saturation": -91
        }
      },
      {
        "featureType": "arterial",
        "elementType": "geometry",
        "stylers": {
          "lightness": -82,
          "saturation": -94
        }
      },
      {
        "featureType": "green",
        "elementType": "geometry",
        "stylers": {
          "color": "#1b1b1b"
        }
      },
      {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": {
          "color": "#181818"
        }
      },
      {
        "featureType": "subway",
        "elementType": "all",
        "stylers": {
          "lightness": -100,
          "saturation": -91
        }
      },
      {
        "featureType": "railway",
        "elementType": "geometry",
        "stylers": {
          "lightness": -84
        }
      },
      {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": {
          "color": "#313131"
        }
      },
      {
        "featureType": "all",
        "elementType": "labels",
        "stylers": {
          "color": "#8b8787",
          "lightness": -19,
          "visibility": "off"
        }
      },
      {
        "featureType": "manmade",
        "elementType": "geometry",
        "stylers": {
          "color": "#1b1b1b"
        }
      },
      {
        "featureType": "local",
        "elementType": "geometry",
        "stylers": {
          "lightness": -97,
          "saturation": -100,
          "visibility": "off"
        }
      },
      {
        "featureType": "subway",
        "elementType": "geometry",
        "stylers": {
          "lightness": -76
        }
      },
      {
        "featureType": "railway",
        "elementType": "all",
        "stylers": {
          "lightness": -40,
          "visibility": "off"
        }
      },
      {
        "featureType": "boundary",
        "elementType": "geometry",
        "stylers": {
          "color": "#8b8787",
          "weight": "1",
          "lightness": -29
        }
      }
    ]
  });

  $.get('../../data/car.csv', function(csvstr) {

    var options = {
      strokeStyle: 'rgba(50, 50, 255, 0.8)',
      lineWidth: 0.05,
      globalCompositeOperation: 'lighter',
      draw: 'simple'
    }

    var dataSet = mapv.csv.getDataSet(csvstr);

    var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

  });

</script>

</body>
</html>
